<template>
  <view>
    <!-- 轮播图 -->
    <swiper indicator-dots autoplay :interval="3000" :duration="500" circular>
      <swiper-item v-for="item in lunboList" :key="item.goods_id">
        <navigator :url="item.navigator_url" class="img">
          <image :src="item.image_src" mode="aspectFill"></image>
        </navigator>
      </swiper-item>
    </swiper>
    
    <!-- 分类导航区域 -->
    <view class="nav-list">
       <view @click="toCate(item.name)" class="nav-item" v-for="(item, i) in navList" :key="i">
         <image :src="item.image_src" class="nav-img"></image>
       </view>
    </view>
    
    <!-- 楼层区域 -->
    <view class="floor">
      <view v-for="(item,inex) in floorList" :key="index">
        <!-- 标题 -->
        <view class="title">
          <image :src="item.floor_title.image_src" mode="heightFix"></image>
        </view>
        <!-- 楼层中的图片 -->
        <view class="imgbox">
          <view class="left">
            <navigator :url="item.product_list[0].navigator_url">
              <image
               @click="toGoodsList(item.product_list[0].navigator_url)" 
               :src="item.product_list[0].image_src" 
               :style="{ width: item.product_list[0].image_width + 'rpx' }"
                mode="widthFix">
              </image>
            </navigator>
          </view>
          <view class="right">
            <block  v-for="(subitem, subindex) in item.product_list" :key="subindex">
                  <image 
                  @click="toGoodsList(subitem.navigator_url)" 
                  v-if="subindex !== 0"  
                  :src="subitem.image_src" 
                  :style="{ width: subitem.image_width + 'rpx'}"
                  mode="widthFix">
                  </image>
            </block>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        lunboList:[],// 轮播图数据
        navList:[], // 分类数据
        floorList:[], // 楼层数据
      };
    },
    methods:{
      // 跳转到商品列表页面
      toGoodsList (url) {
        // 从路径中分离出参数
        // let query = url.split('?')
        // console.log(url);
        // 跳转
        // uni.navigateTo({
        //   url: `/pages/goods_list/goods_list?${query}`
        // })
      },
      
      // 获取轮播图数据
      async getLunboList(){
        const res=await uni.$http.get('/api/public/v1/home/swiperdata')
        // console.log(res);
        // 判断是否请求成功
        if(res.data.meta.status===200){
          this.lunboList=res.data.message
        }else{
          uni.$showMsg()
        }
      },
      
      // 获取分类数据
      async getNavList(){
        const {data:res}=await uni.$http.get('/api/public/v1/home/catitems')
        if(res.meta.status !== 200){
          return uni.$showMsg()
        }
        this.navList=res.message
      },
      
      // 分类导航点击事件
      toCate(name){
        if(name==='分类'){
          uni.switchTab({
            url:'/pages/cate/cate'
          })
        }
      },
      
      // 获取楼层数据
      async getFloorList(){
        const {data:res}=await uni.$http.get('/api/public/v1/home/floordata')
        if(res.meta.status !== 200)return uni.$showMsg()
        this.floorList=res.message
      },
      
    },
    // uni-app里面不仅可以使用vue的生命周期，还可以使用微信小程序的生命周期
    onLoad() {
      // 获取轮播图数据
      this.getLunboList()
      // 获取分类导航数据
      this.getNavList()
      // 获取楼层数据
      this.getFloorList()
    }
  }
</script>

<style lang="scss">
swiper {
 height: 330rpx;
 .img,
 image {
  width: 100%;
  height: 100%;
 }
}
.nav-list{
  display: flex;
  justify-content: space-around;
  padding: 40rpx 0;
  .nav-item{
    width: 128rpx;
    height: 140rpx;
    image{
      width: 100%;
      height: 100%;
    }
  }
}
.floor{
  .title{
    margin: 10rpx 0;
    width: 100%;
    image{
      height: 40px;
      width: 100%;
    }
  }
  .imgbox {
    display: flex;
    .left {
      margin-left: 16rpx;
    }
    .right {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      navigator{
        margin-left: 10rpx;
      }
    }
  }
}
</style>
